<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		 <!--[if lt IE 9]>
    <script src="../js/jquery-1.11.3.js"></script>
    
<![endif]-->
<!--[if gte IE 9]><!-->
    <script src="../js/jquery-3.1.1.js"></script>
<!--<![endif]-->
<script type="text/javascript">
$(document).ready(function(){
  $("#input1").focus(function(){
  	 $("#span1").text("请输入你的电话号码?--得到焦点");
      $("#span1").css("display","inline").fadeOut(2000);
  });

  
  $("#input1").blur(function(){
  	$("#span1").text("请输入你的电话号码?--失去焦点");
  	$("#span1").css("display","inline").fadeIn(2000);
  });
  $("#input2").change(function(){
    alert("文本已被修改");
});
  $("#div3").focusin(function(){
    $(this).css("background-color","#FFFFCC");
  });
  $("#div3").focusout(function(){
    $(this).css("background-color","#FFFFFF");
  });
  
  $("#input3").select(function(){
    alert("文本已选中!");
  });

  
  
   $("#form1").submit(function(){
    alert("提交");
  });
  
    

 });

</script>
<style>
span
{
display:none;
}
</style>
	</head>
	<body>
		
<span id="span1"></span><br>


失去焦点: <input id="input1" type="text">（在输入框写些东西，然后点击输入框外，让其失去焦点。）<br>

改动试试: <input id="input2" type="text"> 
（然后按下 enter 键或点击输入框外部。）<br>
<div id=div3 style="border: 1px solid black;padding:10px;">
	当 div 元素或其任意子元素获得焦点时<br>
First name: <input type="text">（点击输入框获取焦点，点击输入框外的部分失去焦点。）<br>
（正常情况下 div本身无法有焦点。）
</div>



<input id=input3 type="text" value="www.runoob.com">在输入框中选取文本</br>

<div id=div4 style="border: 1px solid black;padding:10px;">
<h1>提交</h1>
<form id=form1 action="">
First name: 
<input type="text" name="FirstName" value="Mickey"><br>
Last name: 
<input type="text" name="LastName" value="Mouse"><br>
<input type="submit" value="提交">
</form> 
</div>

	</body>
</html>
